import React,{Component} from "react";
// import '../css/common.css'
export default class TodoList extends Component{
    constructor(){
        super()
        this.state={
            text:'',
            todoList:[
                {id:1,text:'小明',checked:false},
                {id:2,text:'小红',checked:false},
                {id:3,text:'小方',checked:true},
            ]
        }
    }

    myinput=React.createRef()
    render(){
        return(
            <div>
                <input value={this.state.text} onChange={()=>{
                    this.setState({
                        text:this.state.text
                    })
                }}/>
                <button onClick={this.handleClick}>添加</button>
                <ul>
                    {
                        this.state.todoList.map((item,i)=>
                            <li key={item.id}>
                                <input type="checkbox" checked={item.checked} onClick={()=>{this.handleCheck(i)}}/>
                                <span style={{textDecoration:item.checked?'line-through':''}}>{item.text}</span>
                                <button onClick={this.handleDelete.bind(this,i)}>删除</button>
                            </li>
                        )
                    }
                </ul>
                <div className={this.state.todoList.length===0?'':'hidden'}>暂无待办事项</div>
            </div>
        )
    }
    handleClick=()=>{
        let newTodoList=[...this.state.todoList]
        newTodoList.push({
            id:new Date(),
            text:this.state.text,
            checked:false
        })
        this.setState({
            todoList:newTodoList
        })
    }
    handleCheck(i){
        let newTodoList=[...this.state.todoList]
        newTodoList[i].checked=!newTodoList[i].checked
        this.setState({
            todoList:newTodoList
        })
    }
    handleDelete(i){
        let newTodoList=this.state.todoList.concat()
        newTodoList.splice(i,1)
        this.setState({
            todoList:newTodoList
        })
    }
}